<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>SMD Tester</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/yui/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../lib/yui/container/assets/container.css"> 
<link rel="stylesheet" type="text/css" href="../../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../css/inputEx.css' />

<style>
body {
	text-align: left;
}
#mainBox {
	margin:40px auto;
	width: 80%;
	background-color: #ccccff;
	padding: 20px;
}
p {
	margin: 10px;
	font-weight: bold;
}
#formContainer {
	width: 60%;
}
</style>
</head>

<body class="yui-skin-sam">
	
	<div id='mainBox'>
		
		<div id='smdSource'></div>
		
		<p id='smdDescription'></p>
		
		<div id='serviceMethod'></div>
		
		<p id='methodDescription'></p>
		
		<div id='formContainer'>
		</div>
		
		<div id='treeContainer'>
			<p>Results :</p>
		</div>
		
	</div>

<!-- YUI -->
<script type="text/javascript" src="../../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../../lib/yui/get/get-min.js"></script>
<script type="text/javascript" src="../../lib/yui/json/json-min.js"></script>

<!-- YUI-RPC -->
<script type="text/javascript" src="../../lib/yui-rpc.js"></script>

<!-- inputEx -->
<script type="text/javascript" src="../../js/inputex.js"></script>
<script type="text/javascript" src="../../js/Field.js"></script>
<script type="text/javascript" src="../../js/Group.js"></script>
<script type="text/javascript" src="../../js/Form.js"></script>
<script type="text/javascript" src="../../js/fields/StringField.js"></script>
<script type="text/javascript" src="../../js/fields/SelectField.js"></script>
<script type="text/javascript" src="../../js/fields/IntegerField.js"></script>
<script type="text/javascript" src="../../js/fields/NumberField.js"></script>
<script type="text/javascript" src="../../js/fields/Textarea.js"></script>
<script type="text/javascript" src="../../js/fields/UrlField.js"></script>
<script type="text/javascript" src="../../js/json-schema.js"></script> 
<script type="text/javascript" src="../../js/rpc/inputex-rpc.js"></script> 
<script type="text/javascript" src="../../js/widgets/json-tree-inspector.js"></script>

<script>

inputEx.SMDTester = {
	
	init: function() {
		
		// SMD select
		var selectStr = 'select smd';
		inputEx({
			type: 'select',
			inputParams: {
				label: "SMD",
				parentEl: 'smdSource',
				selectValues: [selectStr, 
											 'smd/json-time.smd', 
											 'smd/json-head.smd', 
											 'smd/langdetect.smd', 
											 'smd/html-whitelist.smd',
											 'smd/yql.smd',
											 'smd/jsonptunnel.smd',
											 'smd/mathservice.smd',
											 'smd/flickr.smd',
											 'smd/yahoopipes.smd',
											 'smd/delicious.smd',
											 'smd/wikipedia.smd', 
											 'smd/google.smd',
											 'smd/twitter.smd',
											 'smd/geonames.smd',
											 'smd/yahoo.smd'
											],
				description: "Select the Service Mapping Description file"
			}
		}).updatedEvt.subscribe(function(e, params) {
				var smdFile = params[0];
				if(smdFile != selectStr)  this.loadSMD(smdFile);
		}, this, true);
		
	},
	
	// When the user select a SMD in the select
	loadSMD: function(smdFile) {
		
		YAHOO.util.Dom.get('serviceMethod').innerHTML = "";
		YAHOO.util.Dom.get('formContainer').innerHTML = "";
		
		this.service = new YAHOO.rpc.Service(smdFile,{ success: this.onServiceLoaded,	scope: this});
	},
	
	// When the SMD has been loaded
	onServiceLoaded: function() {
		
		// Set SMD Description :
		YAHOO.util.Dom.get('smdDescription').innerHTML = 
					(YAHOO.lang.isString(this.service._smd.description)) ? this.service._smd.description : "";
		
		// Method Select
		var selectStr = 'select a method';
		var genMethods = [selectStr];
		for(var key in this.service) {
			if(this.service.hasOwnProperty(key) && YAHOO.lang.isFunction(this.service[key])) {
				genMethods.push(key);
			}
		}	
		var select = inputEx({
				type: 'select',
				inputParams: {
					parentEl: 'serviceMethod',
					selectValues: genMethods,
					label: 'Method',
					description: "Select the method"
				}
		});
		
		select.updatedEvt.subscribe(function(e, params) {
			var methodName = params[0];
			if(methodName != selectStr) this.onServiceMethod(methodName);
		}, this, true);
		
		if(genMethods.length == 2) {
			select.setValue(genMethods[1]);
		}
		
	},
	
	// When a method has been selected :
	onServiceMethod: function(methodName) {
		
		// Set Method Description :
		YAHOO.util.Dom.get('methodDescription').innerHTML = 
					(YAHOO.lang.isString(this.service[methodName].description)) ? this.service[methodName].description : "";
		
		
		
		// generate the form for the given method
		YAHOO.util.Dom.get('formContainer').innerHTML = "";
		inputEx.generateServiceForm(this.service[methodName], { parentEl: 'formContainer' }, {
			success: function(results) {
					var treeContainer = YAHOO.util.Dom.get('treeContainer');
					treeContainer.innerHTML = "";
					new YAHOO.inputEx.widget.JsonTreeInspector(treeContainer, results);
			}
		});
	}
	
};
YAHOO.util.Event.onDOMReady(inputEx.SMDTester.init, inputEx.SMDTester, true);

</script>

</body>
</html>
